<template>
	<view class="wrap">
		<view class="body">
			<rich-text :nodes="richData"></rich-text>
		</view>
	</view>
</template>
<script>
	import {
		article_details
	} from '@/api/new_api.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {},
		data() {
			return {
				richData: "换料须知"
			};
		},
		async onLoad(opition) {
			if(opition.type){
			this.article_details(opition.type)	
			}
			
		},
		methods: {
		article_details(type) {
			article_details({id:type}).then((res) => {
				
				const data = res.data
				uni.setNavigationBarTitle({
					title:data.title
				})
				this.richData = this.setRichData(data.content)
			})
		},
		// 解决富文本图片没有设置适应宽度的问题
		setRichData(data){
			return data.replace(/<img/g, "<img style='width:100%;height:auto;'")
		},
		},
	};
</script>
<style lang="scss" scoped>
	.wrap {
		overflow: hidden;
		width: 750rpx;
		min-height: 100vh;
		position: relative;
		background-color: #fff;

		.body {
			width: 690rpx;
			overflow: hidden;
			margin: 30rpx auto;
			font-size: 28rpx;
			line-height: 50rpx;
			color: #4D4646;
			text-align: center;

			image {
				width: 100%;
				height: auto;
				border-radius: 20rpx;
				overflow: hidden;
			}
		}
	}
</style>